<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        1. sessionStorage 
        会话存储
            用于保存临时同一个窗口(session)的数据, 关闭窗口之后数据就会被删除

        操作sessionStorage
            设置
                sessionStorage.setItem("键名", "键值")
            获取
                sessionStorage.getItem("键名")
            删除
                sessionStorage.removeItem("键名")


        2. localStorage 
        本地存储
            用于长久的保留整个网页(浏览器)的数据, 保存的数据没有过期时间, 直到手动清除浏览器的缓存

        操作localStorage
            设置
                localStorage.setItem("键名", "键值")
            获取
                localStorage.getItem("键名")
            删除
                localStorage.removeItem("键名")


        sessionStorage和localStorage 是本地存储的方式
        特点:
            普遍标准限制在5MB左右 (大小的限制与不同浏览器有关, 超出大小会报错)
            键值对形式进行存储 (JSON 字符串存储)
            不可以设置过期时间、设置指定路径、指定域名
     -->

    <script>
        let useInfoDate = {
            id: 1,
            name: "hy",
            token: 216372617362187
        };

        window.sessionStorage.setItem("token", 999999999);
        // JSON字符串 JSON.stringify
        window.sessionStorage.setItem("userInfo", JSON.stringify(useInfoDate));


        console.log(window.sessionStorage.getItem("token"));
        // JSON序列化成JSON对象
        let userInfoStr = window.sessionStorage.getItem("userInfo");
        console.log(JSON.parse(userInfoStr));

        // 一秒之后删除 token
        setTimeout(() => {
            window.sessionStorage.removeItem("token");
        }, 1000);


        // window.localStorage.setItem("x-token", 8888888888)
    </script>
</body>

</html>